<template>
  <div>
    <!-- <el-card shadow="never" class="aui-card--fill"> -->
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <!--文本框-->
      <el-form-item>
        <el-select v-model="dataForm.formType" placeholder="表单类型" clearable>
          <el-option v-for="t in this.$getDictList('BPM_FORM_TYPE', false)" :key="t.val" :label="t.label" :value="t.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.processName" :placeholder="$t('approveManage.processName')" clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.applyerName" :placeholder="$t('approveManage.applyer')" clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="dataForm.bDate" type="date" :placeholder="$t('beginDate')" value-format="yyyy-MM-dd" style="width: 160px">
        </el-date-picker>
        -
        <el-date-picker v-model="dataForm.eDate" type="date" :placeholder="$t('endDate')" value-format="yyyy-MM-dd" style="width: 160px">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList()">{{ $t('query') }}</el-button>
        <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
      </el-form-item>
    </el-form>
    <div class="aui-card-list-body-table">
      <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize class="vxe-table-element" remote-sort @sort-change="dataListSortChangeHandle" style="margin-top: 10px;" max-height="auto">
        <vxe-table-column type="index" width="50" align="center"></vxe-table-column>
        <vxe-table-column field="formName" title="approveManage.formName" width="180"></vxe-table-column>
        <vxe-table-column field="name" title="approveManage.name" width="100" align="center"></vxe-table-column>
        <vxe-table-column field="applyer" title="approveManage.applyer" width="140">
          <template slot-scope="scope">
            {{ scope.row.applyerName }}({{ scope.row.applyer }})
          </template>
        </vxe-table-column>
        <vxe-table-column field="createTime" title="approveManage.createTime" width="140" align="center">
        </vxe-table-column>
        <vxe-table-column field="businessKey" title="approveManage.businessKey" width="150"></vxe-table-column>
        <vxe-table-column field="remark" title="approveManage.remark"></vxe-table-column>

        <vxe-table-column title="handle" width="80">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-edit" @click="deal(scope.row)">
              {{ $t('approveManage.deal') }}
            </el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 节点流转 -->
      <todoManageWander v-if="todoManageWanderVisible" ref="todoManageWander" @refreshDataList="getDataList">
      </todoManageWander>
    </div>
    <!-- </el-card> -->
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import todoManageWander from './todo-manage-wander'
// import { isEmpty } from '../../../utils/validate'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/flowable/task',
        getDataListIsPage: true,
        activatedIsNeed: false
      },
      CODE_DICT_FORMTYPE: 'BPM_FORM_TYPE',
      dataForm: {
        processName: '',
        formType: '',
        applyer: '',
        applyerName: '',
        bDate: '',
        eDate: ''
      },
      tableHeightHold: 42,
      todoManageWanderVisible: false
    }
  },
  activated () {
    this.getDataList()
  },
  methods: {
    passAll () {
      console.log('dataListSelections', this.dataListSelections)
    },
    backAll () {
      console.log('dataListSelections', this.dataListSelections)
    },
    viewHandle (formId, bizId, menuId, edit) {
      this.$nextTick(() => {
        this.gotoRouteHandle(menuId, { formId: formId, bizId: bizId, edit: edit })
      })
    },
    deal (task) {
      this.openFlow(task)
    },
    openFlow (task) {
      var router = {
        name: 'flowable-todo-manage-deal',
        id: task.procInstId,
        menuId: this.$route.meta.menuId,
        oldName: 'flowable-todo-parent',
        path: 'flowable/todo-manage-deal',
        title: task.processName + '-' + this.$t('approveManage.deal')
      }
      var params = {
        taskId: task.id
      }
      this.$options.methods.openNewTab(this.$router, router, params)
    },
    gotoRouteHandle (menuId, params) {
      let route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
      if (route) {
        this.$router.push({ name: route.name, params: params || route.params })
      }
    }
  },
  components: {
    todoManageWander
  }
}
</script>

<style>
/* .approve-manage .el-card__body {
  padding: 20px 10px 0px 20px;
} */
</style>
